<template>
    <div class="device-manager">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
            <h4 style="margin: 0; font-weight: 500;">设备列表</h4>
            <button @click="showAddForm = !showAddForm"
                style="padding: 0.25rem 0.5rem; background: var(--color-success); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em;">
                {{ showAddForm ? '取消' : '+ 添加设备' }}
            </button>
        </div>

        <!-- 设备添加表单 -->
        <div v-if="showAddForm" class="device-form"
            style="background: var(--color-background-soft); padding: 1rem; border-radius: var(--border-radius); margin-bottom: 1rem; border: 1px solid var(--color-border);">
            <h4 style="margin: 0 0 0.5rem 0; color: var(--color-primary);">添加设备到 {{ cabinet.name }}</h4>
            <div
                style="margin-bottom: 0.5rem; padding: 0.5rem; background: var(--color-background); border-radius: 4px; font-size: 0.85em; color: var(--color-text-light);">
                可用空间: {{ cabinet.availableUnits }}U
            </div>

            <div style="margin-bottom: 0.5rem;">
                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.9em;">设备名称:</label>
                <input v-model="deviceForm.name" type="text" placeholder="例如: Web Server 01"
                    style="width: 100%; padding: 0.4rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.9em;" />
            </div>

            <div style="margin-bottom: 0.5rem;">
                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.9em;">描述:</label>
                <input v-model="deviceForm.description" type="text" placeholder="设备描述"
                    style="width: 100%; padding: 0.4rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.9em;" />
            </div>

            <div style="margin-bottom: 0.5rem;">
                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.9em;">设备类型:</label>
                <select v-model="deviceForm.type"
                    style="width: 100%; padding: 0.4rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.9em;">
                    <option v-for="(config, type) in DeviceTypeConfig" :key="type" :value="type">
                        {{ config.icon }} {{ config.name }}
                    </option>
                </select>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
                <div>
                    <label
                        style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.85em;">机架位置(U):</label>
                    <input v-model.number="deviceForm.rackPosition" type="number" min="1" max="47"
                        style="width: 100%; padding: 0.4rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.9em;" />
                </div>
                <div>
                    <label
                        style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.85em;">占用高度(U):</label>
                    <input v-model.number="deviceForm.rackUnits" type="number" min="1" max="10"
                        style="width: 100%; padding: 0.4rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.9em;" />
                </div>
            </div>

            <div style="margin-bottom: 0.5rem;">
                <label
                    style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.9em;">功耗(W):</label>
                <input v-model.number="deviceForm.powerConsumption" type="number" min="0"
                    style="width: 100%; padding: 0.4rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.9em;" />
            </div>

            <!-- 设备类型特有字段 -->
            <DeviceTypeFields v-model="deviceForm" :device-type="deviceForm.type" />

            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                <button @click="addDevice"
                    style="flex: 1; padding: 0.5rem; background: var(--color-success); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 0.9em;">
                    确认添加
                </button>
                <button @click="resetForm"
                    style="flex: 1; padding: 0.5rem; background: var(--color-text-light); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 0.9em;">
                    重置
                </button>
            </div>
        </div>

        <!-- 设备列表 -->
        <div v-if="cabinet.devices.length === 0 && !showAddForm"
            style="padding: 1rem; background: var(--color-background-soft); border-radius: 4px; text-align: center; color: var(--color-text-light-2); font-style: italic;">
            暂无设备，点击"添加设备"开始
        </div>

        <div v-else-if="cabinet.devices.length > 0" style="max-height: 300px; overflow-y: auto;">
            <div v-for="device in cabinet.devices" :key="device.id"
                style="background: var(--color-background-soft); margin-bottom: 0.5rem; padding: 0.75rem; border-radius: 4px; border-left: 4px solid var(--color-primary);">
                <div
                    style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
                    <div style="flex: 1;">
                        <div style="font-weight: 500; margin-bottom: 0.25rem;">
                            {{ DeviceTypeConfig[device.type].icon }} {{ device.name }}
                        </div>
                        <div style="font-size: 0.85em; color: var(--color-text-light-2); margin-bottom: 0.25rem;">
                            {{ device.description || '无描述' }}
                        </div>
                        <div style="font-size: 0.8em; color: var(--color-text-light);">
                            {{ device.statusDescription }}
                        </div>

                        <!-- 设备特有信息显示 -->
                        <div v-if="device.type === DeviceType.SERVER && (device as any).specs !== '未配置规格'"
                            style="font-size: 0.75em; color: var(--color-success); margin-top: 0.25rem;">
                            规格: {{ (device as any).specs }}
                        </div>
                        <div v-if="[DeviceType.SWITCH, DeviceType.ROUTER, DeviceType.FIREWALL].includes(device.type) && (device as any).networkInfo !== '未配置网络信息'"
                            style="font-size: 0.75em; color: var(--color-success); margin-top: 0.25rem;">
                            网络: {{ (device as any).networkInfo }}
                        </div>
                        <div v-if="device.type === DeviceType.STORAGE && (device as any).storageInfo !== '未配置存储信息'"
                            style="font-size: 0.75em; color: var(--color-success); margin-top: 0.25rem;">
                            存储: {{ (device as any).storageInfo }}
                        </div>
                    </div>
                    <button @click="removeDevice(device.id)"
                        style="padding: 0.25rem 0.5rem; background: var(--color-danger); color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8em;">
                        删除
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Cabinet } from '@/stores/datacenter'
import { DeviceType, DeviceTypeConfig, DeviceFactory } from '@/stores/datacenter'
import DeviceTypeFields from './DeviceTypeFields.vue'

interface Props {
    cabinet: Cabinet
}

const props = defineProps<Props>()

const showAddForm = ref(false)

const deviceForm = ref({
    name: '',
    description: '',
    type: DeviceType.SERVER,
    rackPosition: 1,
    rackUnits: 1,
    powerConsumption: 0,
    // 服务器特有属性
    cpu: '',
    memory: '',
    storage: '',
    operatingSystem: '',
    // 网络设备特有属性
    portCount: 0,
    managementIP: '',
    firmware: '',
    // 存储设备特有属性
    capacity: '',
    raidLevel: '',
    interfaceType: ''
})

const addDevice = () => {
    try {
        let device

        // 根据设备类型创建不同的设备实例
        switch (deviceForm.value.type) {
            case DeviceType.SERVER:
                device = DeviceFactory.createServer(deviceForm.value.name, deviceForm.value.description)
                    ; (device as any).cpu = deviceForm.value.cpu
                    ; (device as any).memory = deviceForm.value.memory
                    ; (device as any).storage = deviceForm.value.storage
                    ; (device as any).operatingSystem = deviceForm.value.operatingSystem
                break
            case DeviceType.SWITCH:
                device = DeviceFactory.createSwitch(deviceForm.value.name, deviceForm.value.description)
                    ; (device as any).portCount = deviceForm.value.portCount
                    ; (device as any).managementIP = deviceForm.value.managementIP
                    ; (device as any).firmware = deviceForm.value.firmware
                break
            case DeviceType.ROUTER:
                device = DeviceFactory.createRouter(deviceForm.value.name, deviceForm.value.description)
                    ; (device as any).portCount = deviceForm.value.portCount
                    ; (device as any).managementIP = deviceForm.value.managementIP
                    ; (device as any).firmware = deviceForm.value.firmware
                break
            case DeviceType.STORAGE:
                device = DeviceFactory.createStorage(deviceForm.value.name, deviceForm.value.description)
                    ; (device as any).capacity = deviceForm.value.capacity
                    ; (device as any).raidLevel = deviceForm.value.raidLevel
                    ; (device as any).interfaceType = deviceForm.value.interfaceType
                break
            case DeviceType.FIREWALL:
                device = DeviceFactory.createFirewall(deviceForm.value.name, deviceForm.value.description)
                    ; (device as any).portCount = deviceForm.value.portCount
                    ; (device as any).managementIP = deviceForm.value.managementIP
                    ; (device as any).firmware = deviceForm.value.firmware
                break
            default:
                device = DeviceFactory.createServer(deviceForm.value.name, deviceForm.value.description)
        }

        // 设置通用属性
        device.rackPosition = deviceForm.value.rackPosition
        device.rackUnits = deviceForm.value.rackUnits
        device.powerConsumption = deviceForm.value.powerConsumption

        // 添加到机柜
        props.cabinet.addDevice(device)

        resetForm()
        showAddForm.value = false
    } catch (error) {
        alert(`添加设备失败: ${(error as Error).message}`)
    }
}

const removeDevice = (deviceId: string) => {
    if (confirm('确定要删除这个设备吗？')) {
        props.cabinet.removeDevice(deviceId)
    }
}

const resetForm = () => {
    deviceForm.value = {
        name: '',
        description: '',
        type: DeviceType.SERVER,
        rackPosition: 1,
        rackUnits: 1,
        powerConsumption: 0,
        cpu: '',
        memory: '',
        storage: '',
        operatingSystem: '',
        portCount: 0,
        managementIP: '',
        firmware: '',
        capacity: '',
        raidLevel: '',
        interfaceType: ''
    }
}
</script>